<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>音乐</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/music.css">
  <script src="./js/rem.js"></script>
  <script src="./js/tool.js"></script>
</head>
<body class="body">
  <header>
    <h1 class="logo">Hello World</h1>
    <div class="user">
      <a href="index.html">首页</a>
    </div>
  </header>
  <div class="nav">
    <a href="index.html">&lt;首页</a>
  </div>
  <div class="my_audio">
    <h1 class="title">听音乐</h1>
    <img src="" alt="jpg1">
    <audio></audio>
    <div class="control">
      <div class="l">
        <div class="prev">◀</div>
        <div class="on_off">▶</div>
        <div class="next">▶</div>
      </div>
      <div class="r">
        <div class="time">
          <span class="cur">00:00</span>
          <span> / </span>
          <span class="dur">00:00</span>
        </div>
        <div class="progress_bar">
          <div class="progress_all">
            <div class="progress_c"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="music_list">
    <div class="list active" data-audio="./media/1.mp3" data-pic="./img/1.jpg">
      <div class="top">
        <div class="name">睡公主 &nbsp;&nbsp;</div>
        <div class="sing">歌手：邓紫琪</div>
      </div>
      <div class="bottom">
        <div class="time">4:42</div>
        <div class="state">暂停</div>
      </div>
    </div>
    <div class="list" data-audio="./media/2.mp3" data-pic="./img/2.jpg">
      <div class="top">
        <div class="name">讲不出再见 &nbsp;&nbsp;</div>
        <div class="sing">歌手：谭咏麟</div>
      </div>
      <div class="bottom">
        <div class="time">4:52</div>
        <div class="state">等待</div>
      </div>
    </div>
    <div class="list" data-audio="./media/3.mp3" data-pic="./img/3.jpg">
      <div class="top">
        <div class="name">只要平凡 &nbsp;&nbsp;</div>
        <div class="sing">歌手：张杰 _ 张碧晨</div>
      </div>
      <div class="bottom">
        <div class="time">4:06</div>
        <div class="state">等待</div>
      </div>
    </div>
  </div>
  <script src="./js/music.js"></script>
</body>
</html>